<!--登录页-->
<template>
  <div style="height: 100vh; background-image:url('/imgs/login/backgroundImg.png'); overflow: hidden">
    <el-container style="padding: 30px;">
      <el-header>
      </el-header>
      <el-main>
        <el-row gutter="40">
          <el-col :span="16"></el-col>
          <el-col :span="8">
            <el-card style="margin-top: 80px">
              <el-menu>

              </el-menu>
              <h3 style="text-align: center">用户登录</h3>
              <el-form label-position="top">
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-input placeholder="请输入验证码" style="margin-top: 10px" v-model="user.code"></el-input>
                    </el-col>
                    <el-col :span="12"><img :src="captchaSrc" @click="getCaptcha" style="width: 100px"></el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="短信验证码">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-input placeholder="请输入手机号" type="tel" style="margin-top: 10px"
                                v-model="user.phone"></el-input>
                    </el-col>
                    <el-col :span="6">
                      <el-input placeholder="验证码校验" type="tel" style="margin-top: 10px"
                                :disabled="SMS"   v-model="user.checkSms"></el-input>
                    </el-col>
                    <el-col :span="3">
                      <el-button type="primary" @click="getSms" style="margin-top: 10px">{{ sms }}</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
                </el-form-item>
              </el-form>
              <div style="text-align: center; color: #666; font-size: 14px; padding: 10px 0;">
                (体验账号:Tom 密码:123456)
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios, {create} from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import qs from "qs";


const sms = ref('获取验证码');

const smsData = ref('');


const getSms = () => {
  axios.post(BASE_URL+'/v1/user/sendSMS/'+user.value.phone)
      .then((response) => {
        if (response.data.code == 2000){
          sms.value="已发送";
          SMS.value=false;
        }else {
          ElMessage.error(response.data.data);
        }
      });
}

const user = ref({
  username: '',
  password: '',
  code: '',
  phone:'',
  checkSms:''
});

const login = () => {
  // 回调函数，接收后端发回的响应体存入response对象内
  axios.post(BASE_URL+'/v1/user/login/SMS/'+user.value.phone+'/'+user.value.checkSms)
      .then((response) => {
        if (response.data.code === 2000) {//验证通过
          console.log(response.data);
          console.log(JSON.stringify(response.data.data));//利用JSON.stringify方法将json对象转为字符串
          ElMessage.success("登录成功捏!");
          //localStore只能存储字符串类型的键值对
          localStorage.setItem('user', JSON.stringify(response.data.data));
          router.push('/');//登录成功后转到首页，然后重定向到用户页
        } else if (response.data.code == 5004) {//验证码未找到
          ElMessage.error('验证码过期了,请刷新！');
          getCaptcha;
        } else if (response.data.code == 5002) {//验证码错误
          ElMessage.error('验证码错误,请重试！');
          user.value.code = '';
          getCaptcha;
        } else {
          ElMessage.error("登录失败！");
          console.log(response.data);
          // 清空表单数据
          user.value = {username: '', password: ''};
        }
      });
}
const getCaptcha = () => {
  axios.get(BASE_URL+"/v1/user/cap")
      .then((response) => {
        if (response.data.code == 2000) {
          captchaSrc.value = response.data.data;
        }
      });
}


const captchaSrc = ref('');


onMounted(() => {
  getCaptcha();
})

const SMS = ref(true);

</script>


<style scoped>

</style>